<script setup>
import { ref, reactive, onMounted, toRefs } from 'vue';
import { ArrowRightBold, ArrowLeftBold } from "@element-plus/icons-vue";
import { listService } from "@/api/shop/service";
import eventBus from "@/EventBus"; // 导入 EventBus

const servicelist = ref([]);
const loading = ref(false);

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    serviceName: null,
    serviceCategory: null, // 服务类型
    serviceDetails: null,
    servicePic: null,
    serviceTime: null,
    servicePrice: null,
    sold: null,
    shopId: null,
    launchTime: null,
    downTime: null,
    serviceStatus: null
  }
});

const { queryParams, form } = toRefs(data);

async function getList() {
  loading.value = true;
  try {
    const response = await listService(queryParams.value);
    servicelist.value = response.rows;
  } catch (error) {
    console.error('获取服务列表失败:', error);
    alert('获取服务列表失败，请重试');
  } finally {
    loading.value = false;
  }
}

// 添加服务的处理函数
function handleAdd(service) {
  console.log('添加服务:', service);
  eventBus.emit('add-service', service); // 发送事件
}

// 处理服务类型变化
function handleCategoryChange(category) {
  queryParams.value.serviceCategory = category; // 更新服务类型
  getList(); // 重新获取数据
}

// 在组件挂载时调用 getList
onMounted(() => {
  getList();
});
</script>


<template>
  <div class="right-service">
    <div class="top-right">
      <el-menu class="el-menu-demo">
        <el-icon>
          <ArrowLeftBold />
        </el-icon>
        <el-menu-item @click="handleCategoryChange(null)">全部</el-menu-item>
        <el-menu-item @click="handleCategoryChange('按摩')">按摩</el-menu-item>
        <el-menu-item @click="handleCategoryChange('推拿')">推拿</el-menu-item>
        <el-menu-item @click="handleCategoryChange('刮痧')">刮痧</el-menu-item>
        <el-menu-item @click="handleCategoryChange('其他')">其他</el-menu-item>
        <el-icon>
          <ArrowRightBold />
        </el-icon>
      </el-menu>
    </div>
    <div class="servicelist">
      <ul>
        <li v-for="service in servicelist" :key="service.serviceId">
          <div class="list-left">
            <div class="list-left-img">
              <img :src="service.servicePic.startsWith('http') ? service.servicePic : require(`@/assets/images/${service.servicePic}`)" alt="" />

            </div>
            <div class="list-left-title" style="width: 100%">
              <div class="list-left-titlename">
                <h4>{{ service.serviceName }}</h4>
              </div>
            </div>
            <div class="list-right">
              <div class="price-list">
                <div>{{ service.servicePrice }}元</div>
              </div>
              <div class="time-list">
                <div>{{ service.serviceTime }}min</div>
              </div>
              <div>
                <el-button type="primary" @click="handleAdd(service)" :disabled="loading">添加</el-button>
              </div>
            </div>
          </div>
        </li>
      </ul>
      <div v-if="loading">加载中...</div>
    </div>
  </div>
</template>


<style scoped lang="scss">
/* 你的样式保持不变 */
.list-left {
  display: flex;
  padding-top: 50px;
  padding-left: 80px;
}

.right-service {
  display: flex;
  justify-content: flex-start; /* 左对齐 */
  height: 100%;
  flex-direction: column; /* 垂直排列 */
}

.top-right {
  display: flex;
  width: 100%;
}

.el-menu-demo {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.el-icon {
  margin-left: 50px;
}

.list-left-img {
  display: flex;
  align-items: center; /* 垂直居中 */
}

.list-left-img img {
  height: 120px;
  padding-left: 10px;
  width: 200px;
}

ul {
  list-style-type: none; /* 去掉默认标记 */
  padding: 0; /* 去掉内边距 */
  margin: 0; /* 去掉外边距 */
}
.servicelist {
  padding-right: 10px;
  max-height: 600px; /* 设置最大高度 */
  overflow-y: auto; /* 超出部分显示滚动条 */
}
</style>
